<template>
    <div @click.stop="">
        <Dropdown trigger="custom" :visible="visible"  placement="bottom-start">
            <div class="pcaskuang" @click="visible=true">
                <div v-if="s!=''">{{ p }}/{{ c }}/{{ a }}/{{ s }}</div>
                <div v-else-if="s==''"> <b>请选择省市县镇</b></div>
            </div>
            <DropdownMenu slot="list" class="pcas">
                <div>
                    <span
                        :class="{ cur: p == '' }"
                        @click="(s = ''), (a = ''), (c = ''), (p = '')"
                        >{{ p == "" ? "请选择省" : p }}</span
                    >
                    <span
                        :class="{ cur: c == '' }"
                        v-if="p != ''"
                        @click="(s = ''), (a = ''), (c = '')"
                        >{{ c == "" ? "请选择市" : c }}</span
                    >
                    <span
                        :class="{ cur: a == '' }"
                        v-if="c != ''"
                        @click="(s = ''), (a = '')"
                        >{{ a == "" ? "请选择县" : a }}</span
                    >
                    <span :class="{ cur: s == '' }" v-if="a != ''">{{
                        s == "" ? "请选择镇" : s
                    }}</span>
                </div>
                <chooseP v-if="p == ''" :pcasObj="pcasObj" @down="p = $event" />
                <chooseC
                    v-else-if="c == ''"
                    :pcasObj="pcasObj"
                    :p="p"
                    @down="c = $event"
                />
                <chooseA
                    v-else-if="a == ''"
                    :pcasObj="pcasObj"
                    :p="p"
                    :c="c"
                    @down="a = $event"
                />
                <chooseS
                    v-else-if="s == ''"
                    :pcasObj="pcasObj"
                    :p="p"
                    :c="c"
                    :a="a"
                    @down="s = $event;visible=false"
                    
                />
            </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script>
import axios from "axios";
import chooseP from "./chooseP.vue";
import chooseC from "./chooseC.vue";
import chooseA from "./chooseA.vue";
import chooseS from "./chooseS.vue";
export default {
    components: {
        chooseP,
        chooseC,
        chooseA,
        chooseS
    },
    async created() {
        const pcasObj = await axios
            .get("http://www.aiqianduan.com:56506/pcas")
            .then(data => data.data);
        this.pcasObj = pcasObj;
    },
    data() {
        return {
            pcasObj: {},
            p: "",
            c: "",
            a: "",
            s: "",
            visible: false
        };
    },
    mounted() {
        // mounted表上树，用addEventListener给document添加监听，click会覆盖之前的
        document.addEventListener(
            "click",
            () => {
                this.visible = false;
            },
            false
        );
    }
};
</script>

<style lang="less">
.pcaskuang {
    border: 1px solid #000;
    width: 300px;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    padding-left: 5px;
}
.pcas {
    width: 500px;
    height: 400px;
    border: 1px solid #000;
    padding-top: 10px;
    div {
        margin: 5px 5px;
        border-bottom: 1px solid rgb(206, 197, 197);
        span {
            padding: 3px 0;
            border: 1px solid rgb(206, 197, 197);
            border-right: none;
            border-bottom: none;
            &:last-child {
                border-right: 1px solid rgb(206, 197, 197);
            }
            &.cur {
                color: rgb(156, 155, 155);
                font-weight: bold;
            }
            cursor: pointer;
        }
    }
}
.panel {
    height: 400px;
    overflow-y: scroll;

    a {
        float: left;
        margin-right: 20px;
    }
}
</style>
